I had the same problem. You should change the import of 'assets/.../variables.scss' to './assets/.../variables.scss'. In my case it was in styles.scss but it can be in every .scss file.

Try disabling Ivy engine in tsconfig.json file:

In case if you are using some outdated package which is not compatible with Ivy.

"angularCompilerOptions": {"enableIvy": false}

Or, let's it give a try by running the following commands one by one:

In case if you are upgrading Angular 6 to Angular 12 directly then there might be some issues.

ng update @angular/core@7 @angular/cli@7 --force
ng update @angular/core@8 @angular/cli@8 --force
ng update @angular/core@9 @angular/cli@9 --force
ng update @angular/core@10 @angular/cli@10 --force
ng update @angular/core@11 @angular/cli@11 --force
ng update @angular/core@12 @angular/cli@12 --force

Or, run just the following command:

ng update @angular/core --force

I was having the same issue, I found out that in my case the assets config on angular.json was the one to blame. Check this piece of code from the configuration:

"architect": {
    "build": {
      "builder": "ngx-build-plus:build",
      "options": {
        "aot": true,
        "outputPath": "dist",
        "index": "src/index.html",
        "main": "src/main.ts",
        "tsConfig": "src/tsconfig.app.json",
        "polyfills": "src/polyfills.ts",
        "assets": [
          "src/assets",
          "src/favicon.ico"
        ]
}
}

Inside the src/assets folder there was a bunch of stylesheet code, scss, less, css and it seems that the CSS Minifier just tries to handle everything there as plain CSS. The solution is to remove from this assets any non-processed stylesheets and just leave them under styles config on the angular.json. That did the trick for me, hope it helps you too!

In my opinion, the problem comes from the configuration files related to single-spa-angular architecture, Although the error simply says that:

I'm trying to minify Sass css files in your project but the syntax is unknown! Perhaps I don't know anything about the syntax of Sass files!

As we can't reproduce the problem and this is a hard job to find the origin(s) of warning in SPA platforms with several configuration files but, there's a straight way to find the issue or reproduce the project on your own machine immediately that is comparing with or forking the single-spa-angular repository which is made for Angular 12. Migration from Angular 6 to 12 has some pitfalls itself however you are also trying to keep such library with hidden behaviors.

As already stated ...the plugin expects CSS and not SCSS as input: https://webpack.js.org/plugins/mini-css-extract-plugin/

The angular.json would have been rather relevant ...

In my package.json node-sass was missing.

So after installing latest version of node-sass

my all CSS related error got resolved pls try and keep us posted hear.

this solution should work!

npm install node-sass@latest 

Your problem is related to processing of the scss file. This problem is detailed in the 67607413. In shortly, If scss files are removed or omitted from assets folder, this problem will be solved. I preferred omitting SCSS files.

"assets": [
    "src/favicon.ico",
    {
        "glob": "**/*",
        "input": "src/assets/",
        "ignore": ["**/*.scss"],
        "output": "/assets/"
    },
    ...
]

in my case it was two(!) CssMinimizerPlugins inside singleSpaWebpackConfig.optimization.minimizer/ one aiming only css and one aiming css|scss|sass|less|styl

ive checked angular 11 webpack config and it has no CssMinimizerPlugins for css|scss|sass|less|styl

also ive checked singleSpaAngularWebpack helper. and it does not add this plugin

my workarount for excluding CssMinimizerPlugins for css|scss|sass|less|styl:

singleSpaWebpackConfig.optimization.minimizer = singleSpaWebpackConfig.optimization.minimizer
.filter(plugin => plugin.constructor.name !== 'CssMinimizerPlugin' || plugin.options?.test?.toString().indexOf('less') === -1);

I also faced this issue. Looks like there was some changes in ng serve. Now the production build is the default configuration.

You have to add the development options on build and serve node in angular.json

// >> projects[YOUR_PROJECT_NAME].architect.build.configurations
"configurations": {
  "development": {
    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": true,
    "namedChunks": true
  },
// >> projects[YOUR_PROJECT_NAME].architect.serve
"serve": {
  "defaultConfiguration": "development",
  "configurations": {
    "development": {
      "browserTarget": "YOUR_PROJECT_NAME:build:development"
    },